<template>
  <div class="upload">
    <van-uploader
      :after-read="afterRead"
      result-type="file"
      @delete="deletFile"

	  :preview-full-image="true"
	  :before-read="beforeRead"
      @oversize="onOversize"
      :max-size="1024 * 10 * 1024"
      :max-count="10"
      accept=".jpg,.png,.pdf, .doc, .txt, .docx, .xlsx"
      v-model="fileList"
    >
      <div>
        <van-button
          :icon="require('../assets/images/upload-icon.png')"
          size="small"
          class="upload-bnt"
          type="primary"
        >{{$t('message.scfj')}}</van-button>
        <p class="ts">{{$t('message.file')}}</p>
      </div>
    </van-uploader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  props: {
    pfileList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  mounted() {

	if(this.pfileList.length!==0){
		this.pfileList.forEach(item=>{
			this.fileList.push({
				externalLink:item.externalLink,
				url:item.externalLink,
				fileName:item.fileName,
				fileType:item.fileType,
				originalFileName:item.originalFileName,
				file:{
					name:item.originalFileName
				}
			})
		})		
	}  
  },
  watch: {
    pfileList: function(val) {
       if(val.length!==0){
		   val.forEach(item=>{
		   	this.fileList.push({
				externalLink:item.externalLink,
				url:item.externalLink,
				fileName:item.fileName,
				fileType:item.fileType,
				originalFileName:item.originalFileName,
		   		file:{
		   			name:item.originalFileName
		   		}
		   	})
		   })
	   }
    },

  },
  methods: {
    async afterRead(file) {
      const form = new FormData();
      form.append("file", file.file);

      file.status = "uploading";
      file.message = "上传中...";
      const { data: res } = await this.$axios.post("/api/oss/uploadOSS", form);
      if (res.code == 200) {
        this.$toast(this.$t("message.cfile"));
        file.status = "";
        file.message = this.$t('message.cfile');

        file.externalLink= "/api/oss/downloadOSS?fileName="+res.data[0].fileName
		file.fileName = res.data[0].fileName
		file.fileType = res.data[0].fileType
		file.originalFileName = res.data[0].originalFileName
		file.url = "/api/oss/downloadOSS?fileName="+res.data[0].fileName		
		console.log(file)

      } else {
        this.$toast(this.$t("message.efile"));
		console.log(res)
        file.status = "failed";
        file.message = this.$t('message.efile');
      }
    },
    onOversize(file) {
      this.$toast(this.$t('message.sfile'));
    },
	// 上传前置
	beforeRead(file) {
	 if (file.type !== 'application/msword'&&file.type !== 'image/png'&&file.type !== 'image/jpeg'&&file.type!== 'text/plain'&&file.type!=='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'&&file.type!=='application/vnd.openxmlformats-officedocument.wordprocessingml.document'&&file.type!=='application/pdf') {
		this.$toast(this.$t('message.tfile'));
		return false;
	  }
	  return true;
	},
    deletFile(file) {
		console.log(file)
      this.$axios
        .get("/api/oss/deleteOSS", {
          fileName: file.fileName
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$toast(this.$t("message.sccg"));
          } else {
            this.$toast(this.$t("message.scsb"));
          }
        })
        .catch(err => {
          console.log(err);
        });
      console.log(this.fileList);
    }
  }
};
</script>

<style lang="scss" scoped>
.upload {
  width: 94%;
  margin: 0 auto;
  background-color: #ffffff;
}
.upload-bnt {
  background-color: #fe8c01 !important;
  border: none !important;
  margin-top: 22px;
}
.ts {
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
  margin-top: 12px;
}
.van-uploader {
  margin-top: 12px;
}
</style>
